<template>
	<view class="">
		<view class="me-top">
			<image src="/static/img/bg.png" mode="" class="top-img"></image>
			<view class="me-info-con row" @tap="navTo('/pages/public/userInfo', {login: true})">
				<view class="fill" style="margin-left:30upx;">
					<view class=" row">
						<text class="uesr-name" style="margin-right: 20upx;">{{ userInfo.realName ? userInfo.realName : "点击设置" }}</text>
						<u-icon name="arrow-right" color="#ffffff" size="24"></u-icon>
					</view>
					<view class="uesr-phone" style="padding-top: 10upx;" v-if="userInfo.belongToName">推荐人:{{ userInfo.belongToName }}</view>
				</view>
				<view class="user-icon"><u-avatar :src="userInfo.icon" size="102"></u-avatar></view>
			</view>
		</view>
		<view class="promote-info">
			<u-grid :border="false" col="2">
				<u-grid-item>
					<view class="column center" @tap="navTo('/pages/public/subsidiary?type=1',{login:true})">
						<view class="">
							<text class="promote-money">{{userInfo.allCommission}}</text>
							<text class="promote-tips">元</text>
						</view>
						<view class="promote-tag">成功提现佣金（元）</view>
						<view class="promote-btn promote-y">提现明细</view>
					</view>
				</u-grid-item>
				<u-grid-item>
					<view class="column center" @tap="userCanGet">
						<view class="">
							<text class="promote-money">{{userInfo.commission}}</text>
							<text class="promote-tips">元</text>
						</view>
						<view class="promote-tag">可提现佣金（元）</view>
						<view class="promote-btn promote-l">佣金提现</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="promote-list">
			<u-grid :border="false" col="4">
				<u-grid-item>
					<view class="column center" @tap="navTo('/pages/public/card',{login:true})">
						<image src="/static/img/tuiguangmingpian.png" mode="" class="promote-item-icon"></image>
						<text class="promote-item-txt">推广名片</text>
					</view>
				</u-grid-item>
				<u-grid-item>
					<view class="column center" @tap="navTo('/pages/team/commission',{login:true})">
						<image src="/static/img/yongjinmingxi.png" mode="" class="promote-item-icon"></image>
						<text class="promote-item-txt">佣金明细</text>
					</view>
				</u-grid-item>
				<u-grid-item>
					<view class="column center" @tap="navTo('/pages/team/list',{login:true})">
						<image src="/static/img/wodetuandui.png" mode="" class="promote-item-icon"></image>
						<text class="promote-item-txt">我的团队</text>
					</view>
				</u-grid-item>
				<u-grid-item>
					<view class="column center" @tap="navTo('/pages/team/myteamorder',{login:true})">
						<image src="/static/img/tuanduidingdan.png" mode="" class="promote-item-icon"></image>
						<text class="promote-item-txt">团队订单</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {allCommission:0,commission:0}
		};
	},
	onShow() {
		if (uni.getStorageSync("uid")) {
			this.getUserInfo();
		}
	},
	methods: {
		userCanGet(){
			if(!uni.getStorageSync('uid')){
				this.navTo("/pages/public/author");
				return
			}
			if(this.userInfo.commission<1){
				this.$util.msg('当前金额大于1元才可提现,加油哦~');
				return
			}
			this.navTo(`/pages/public/withdrawal?type=1&money=${this.userInfo.commission}`, {login: true});
		},
		async getUserInfo() {
			if (!uni.getStorageSync("uid")) return;
			const res = await this.$request("user/info", {uid: uni.getStorageSync("uid")});
			console.log(res);
			if (res.result == 0) {
				this.userInfo = res.data;
				getApp().globalData.userInfo=res.data;
			}else{
				this.$util.msg(res.resultNote);
			}
		}
	}
};
</script>

<style scoped>
.me-top,
.top-img {
	width: 750upx;
	height: 380upx;
	position: relative;
}
.top-img {
	z-index: -1;
}
.middle-img {
	width: 708upx;
	height: 179upx;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.me-info-con {
	position: absolute;
	top: calc(var(--status-bar-height) + 70px);
	padding: 0 30upx;
	width: 100%;
	box-sizing: border-box;
}
.uesr-name {
	font-size: 36upx;
	font-weight: bold;
	color: #ffffff;
}
.uesr-phone {
	font-size: 22upx;
	font-weight: 500;
	color: #e4f9ff;
}
.promote-list {
	padding: 50upx 0;
}
.promote-item-icon {
	width: 98upx;
	height: 98upx;
}
.promote-item-txt {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
}
.promote-money {
	font-size: 69upx;
	font-family: Adobe Heiti Std;
	font-weight: bold;
	color: #000000;
}
.promote-tips {
	font-size: 30upx;
	font-family: Adobe Heiti Std;
	font-weight: bold;
	color: #000000;
	
}
.promote-tag {
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
	padding: 20upx 0;
}
.promote-btn {
	width: 213upx;
	height: 60upx;
	text-align: center;
	line-height: 60upx;
	border-radius: 30upx;
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
}
.promote-y {
	background: #ffb400;
	color: #000000;
}
.promote-l {
	background: #0076fe;
	color: #ffffff;
}
.promote-info{
	padding:40upx 0;
	box-shadow: 0px 10upx 20upx 0px rgba(214, 214, 214, 0.25);
}
</style>
